<script setup>
import { reactive } from 'vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()

const emit = defineEmits(['close', 'revokeyes'])

const props = defineProps({
  // 控制弹窗
  isShow: {
    type: Boolean,
    default: false
  },
  // 后端所需id
  id: {
    type: String || Number,
    default: ''
  },
  // 后端所需type
  type: {
    type: String || Number,
    default: ''
  },
  //   接口地址
  url: {
    type: String,
    default: ''
  },
  //   拣货完成 接口地址
  yesUrl: {
    type: String,
    default: ''
  },
  //   拣货撤销接口地址
  revokeUrl: {
    type: String,
    default: ''
  },
  //   是否是三个tabs
  isTabs: {
    type: Boolean,
    default: false
  },
  // 是否需要撤销按钮
  isRevoke: {
    type: Boolean,
    default: false
  },
  isYes: {
    type: Boolean,
    default: false
  },
  //是否需要拆包
  isCB: {
    type: Boolean,
    default: true
  }
})
const isNmuber = ref(false)

// 表单
const ruleForm = reactive({
  executionOrder: 1,
  type: 1, // tabs页面
  schemePdaInfo: '', // 库位信息
  id: '', // 传入数据的id
  inputValue: '' // 输入栏
})

// 接口返回信息i
const returnForm = reactive({
  placeholder: '请扫描/输入物料条码',
  schemePdaInfo: '', // 拣货提示
  message: '', // 提示内容
  schemePdaInfo: '', // 库位信息
  quantityIdentification: '', // 计划量/实际量
  allotNumOut: '' // 出库数量
})

// 提交
const submit = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.url) return proxy.errorMsg('请传入接口url!!!')
  ruleForm.id = props.id
  if (ruleForm.type == 4) {
    isNmuber.value = true
    if (isNmuber.value) return proxy.warningMsg('请输入物料数量!')
  } else {
    try {
      proxy.$modal.loading('请稍候...')
      const { data: res } = await request({
        url: '/storage' + props.url,
        method: 'POST',
        data: ruleForm
      })

      // 响应信息
      const code = res.resultCode || res.code
      returnForm.message += `${res.message || ''}<br />`
      if (code != 200) return proxy.errorMsg(res.message || '后端没有提示')
      ruleForm.inputValue = ''
      returnForm.quantityIdentification = res.quantityIdentification
      returnForm.allotNumOut = res.allotNumOut
    } catch (err) {
      new Error(err)
      proxy.errorMsg('错误=>' + err)
    } finally {
      proxy.$modal.closeLoading()
    }
  }
}

//当type为4（拆包时）数量回车
const submitNum = async () => {
  try {
    proxy.$modal.loading('请稍候...')
    const { data: res } = await request({
      url: '/storage' + props.url,
      method: 'POST',
      data: ruleForm
    })
    // 响应信息
    const code = res.resultCode || res.code
    returnForm.message += `${res.message || ''}<br />`
    if (code != 200) return proxy.errorMsg(res.message || '后端没有提示')
    returnForm.quantityIdentification = res.quantityIdentification
    returnForm.allotNumOut = res.allotNumOut
    isNmuber.value = false
  } catch (err) {
    new Error(err)
    proxy.errorMsg('错误=>' + err)
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 拣货完成
const yes = async () => {
  if (ruleForm.inputValue) {
    const result = await proxy.MessageBox(`${ruleForm.inputValue}此物料未出库,是否确认`)
    if (!result) return
  }

  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.yesUrl) return proxy.errorMsg('请传入拣货完成接口url!!!')
  proxy.$modal.loading('请稍候...')

  try {
    await request({
      url: '/storage' + props.yesUrl + '/' + props.id,
      method: 'GET'
    })
    // emit('yes')
    proxy.successMsg('操作成功')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 撤销
const revoke = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.revokeUrl) return proxy.errorMsg('请传入撤销接口url!!!')
  proxy.$modal.loading('请稍候...')
  try {
    await request({
      url: '/storage' + props.revokeUrl + '/' + props.id,
      method: 'GET'
    })

    // emit('revokeyes')
    proxy.successMsg('操作成功')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 拣货提示
const getSchemePdaInfo = async () => {
  try {
    const { data: res } = await request({
      url: '/storage' + '/productionPicking/getSchemePdaInfo',
      method: 'GET',
      params: {
        id: props.id,
        type: props.type
      }
    })
    returnForm.schemePdaInfo = res.pickingPrompt
    // emit('revokeyes')
  } catch {
  } finally {
  }
}

// 关闭弹窗
const close = () => {
  for (let Key in returnForm) {
    returnForm[Key] = ''
  }
  for (let Key in ruleForm) {
    ruleForm[Key] = ''
  }
  emit('close')
}
watch(
  () => ruleForm.type,
  val => {
    val == 2 ? (returnForm.placeholder = '请扫描/输入批次号') : (returnForm.placeholder = '请扫描/输入物料条码')
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => props.isShow,
  val => {
    ruleForm.executionOrder = 1
    ruleForm.type = 1
    // ruleForm.schemePdaInfo = ''
    ruleForm.id = ''
    ruleForm.inputValue = ''

    if (val) getSchemePdaInfo()
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <div class="app-container">
    <p-XiaoheDialog :dialogVisible="props.isShow" title="出库" @close="close" width="25%">
      <template #body>
        <el-form label-width="80px" status-icon>
          <el-form-item label="出库方式">
            <el-radio-group v-model="ruleForm.type">
              <el-radio-button size="mini" :name="1" label="1" @click="ruleForm.type = 1">扫码出库</el-radio-button>
              <el-radio-button v-if="!props.isTabs" size="mini" :name="2" label="2" @click="ruleForm.type = 2"
                >批次出库</el-radio-button
              >
              <el-radio-button
                size="mini"
                :name="3"
                label="3"
                @click="props.isTabs ? (ruleForm.type = 2) : (ruleForm.type = 3)"
                >条码撤销</el-radio-button
              >
              <el-radio-button
                v-if="!props.isTabs && props.isCB"
                size="mini"
                :name="4"
                label="4"
                @click="ruleForm.type = 4"
                >拆包出库</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="拣货提示">
            <el-input disabled v-model="returnForm.schemePdaInfo" />
          </el-form-item>
          <el-form-item label="输入栏">
            <el-input v-model="ruleForm.inputValue" @keyup.enter="submit" :placeholder="returnForm.placeholder" />
          </el-form-item>
          <el-form-item label="物料数量" v-if="isNmuber && ruleForm.type == 4">
            <el-input v-model="ruleForm.outNum" @keyup.enter="submitNum" placeholder="请输入数量" />
          </el-form-item>
        </el-form>
        <div style="width: 100%; margin-top: 10px">
          <div class="flex-between">
            <span
              >计划/实际量：{{
                returnForm.quantityIdentification == 'null' ? '返回为null' : returnForm.quantityIdentification
              }}</span
            >
            <span>出库数量{{ returnForm.allotNumOut == 'null' ? '返回为null' : returnForm.allotNumOut }}</span>
          </div>

          <div class="textarea" v-html="returnForm.message"></div>

          <div class="footer_btn">
            <div class="b">
              <el-button v-if="!props.isRevoke" @click="revoke">拣货撤销</el-button>
              <el-button type="primary" v-if="!props.isYes" @click="yes">拣货完成</el-button>
            </div>
          </div>
        </div>
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style lang="scss" scoped>
.footer_btn {
  margin-top: 20px;
  width: 100%;
}
.b {
  float: right;
}

.flex-between {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.btns {
  color: #2e91fc;
  background-color: #fff;
}

.btns-av {
  color: #fff;
  background-color: #2e91fc;
}
.btns-av,
.btns {
  text-align: center;
  cursor: pointer;
  padding: 5px;
  width: 80px;
}
.flex-items-center {
  margin: 10px 0;
}

.textarea {
  height: 150px;
  border: 1px solid #dbdbdb;
  overflow: auto;
}
</style>
